<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="point_basic" style="width: 100%"></div>
    <div class="buttonWrapper">
      <el-button style="margin:8px" type="primary" v-for="shape in shapeList" :key="shape.shape" @click="changeShape(shape.shape)">{{shape.label}}</el-button>
    </div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      chart: null,
      shapeList:[{
        label:"实心圆",
        shape:"circle",
      },{
        label:"实心方块",
        shape:"square",
      },{
        label:"领结",
        shape:"bowtie",
      },{
        label:"斜实心方",
        shape:"diamond",
      },{
        label:"六边形",
        shape:"hexagon",
      },{
        label:"三角形",
        shape:"triangle",
      },{
        label:"实心倒三角",
        shape:"triangle-down",
      },{
        label:"空心圆（默认）",
        shape:"hollow-circle",
      },{
        label:"空心方块",
        shape:"hollow-square",
      },{
        label:"空心领结",
        shape:"hollow-bowtie",
      },{
        label:"斜空心方",
        shape:"hollow-diamond",
      },{
        label:"空心六边形",
        shape:"hollow-hexagon",
      },{
        label:"空心三角形",
        shape:"hollow-triangle",
      },{
        label:"空心倒三角",
        shape:"hollow-triangle-down",
      },{
        label:"X",
        shape:"cross",
      },{
        label:"两端线",
        shape:"tick",
      },{
        label:"加号",
        shape:"plus",
      },{
        label:"横线",
        shape:"hyphen",
      },{
        label:"竖线",
        shape:"line",
      }],
      dataList: [
        { year: "1901 年", type: "衣服", nums: 7 },
        { year: "1902 年", type: "衣服", nums: 6.9 },
        { year: "1903 年", type: "衣服", nums: 9.5 },
        { year: "1904 年", type: "衣服", nums: 10.2 },
        { year: "1905 年", type: "衣服", nums: 11.4 },
        { year: "1906 年", type: "衣服", nums: 13.2 },
        { year: "1907 年", type: "衣服", nums: 10.2 },
        { year: "1908 年", type: "衣服", nums: 11.3 },
        { year: "1909 年", type: "衣服", nums: 13.6 },
        { year: "1910 年", type: "衣服", nums: 14.8 },
        { year: "1911 年", type: "衣服", nums: 13.2 },
        { year: "1912 年", type: "衣服", nums: 12.4 },
        { year: "1913 年", type: "衣服", nums: 13.6 },
        { year: "1914 年", type: "衣服", nums: 14.2 },
      ],
    };
  },
  created() {
    // 模拟数据变化
    setTimeout(() => {
      this.dataList.push(
        { year: "1915 年", type: "衣服", nums: 13.5 },
        { year: "1916 年", type: "衣服", nums: 12.8 }
      );
    }, 2000);
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "point_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    // 给图表赋值
    this.chart.data(this.dataList);

    // 设置度量
    this.chart.scale({
      year: {
        nice:true        
      },
      nums: {
        // nice 是否字段分配刻度
        nice: true,
        // 把 nums 重命名为 销售量，因为图表默认会把键值当作显示的元素。我们不想显示 nums 而是希望展示更易懂的 “销售量”，所有进行了定义别名。 
        alias: "销售量",
        // 将所有 nums 输出的值进行变形，给他加上单位
        formatter: (val) => {
          return val + "万件";
        },
      },
    });
    // 设置提示信息
    this.chart.tooltip({
      // 是否显示 tooltips 辅助线。
      showCrosshairs: true,
      crosshairs:{
        type:"xy",
      }
    });

    // 图形形状为 hollow-circle 默认空心圆
    this.chart.point().position("year*nums").color('type').size(10);

    // 渲染图表
    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据 
    dataList(newValue) {
      console.log(newValue)
      this.chart.changeData(newValue);
    },
  },
  methods:{
    changeShape(type){
      // clear 只会清除画布不会清除 chart 对象内的配置
      this.chart.clear();
      this.chart.point().position("year*nums").color('type').shape(type).size(10);
      this.chart.render();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
.buttonWrapper{
  text-align: left;
}
</style>